<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式后台</title>
    <script src="./js/echarts.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">

    <style>
        
    </style>
    <link rel="stylesheet" href="./css/media.css">
    <link rel="stylesheet" href="./css/res.css">
    <style>

    </style>
</head>

<body>
    <!-- header start -->
    <header class="header">
        <div class="header-content">
            <a href="#" class="logo"><img src="./images/logo.png" alt=""></a>
            <nav class="menu">
                <ul id="J_menu-list">
                    <li><a href="#">概况</a></li>
                    <li><a href="#">教务</a></li>
                    <li><a href="#">营销</a></li>
                    <li><a href="#">运销</a></li>
                    <li><a href="#">用户</a></li>
                    <li><a href="#">交易</a></li>
                </ul>
                <span class="iconfont icon-fenlei" id="J_lanmu"></span>
            </nav>
        </div>
    </header>
    <!-- end header -->

    <!-- sidebar-menu start -->
    <nav class="sidebar-menu">
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="iconfont icon-jiaoxuepingjia"></span>
                教学管理
            </div>
            <ul class="sub-menu">
                <li><a href="#">班级管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">教师管理</a></li>
                <li><a href="#">学生管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="iconfont icon-ren1"></span>
                助学管理
            </div>
            <ul class="sub-menu">
                <li><a href="#">班级管理</a></li>
                <li><a href="#">课程管理</a></li>
            </ul>
        </div>
        <div class="menu-item">
            <div class="menu-item-title">
                <span class="iconfont icon-yingxiao"></span>
                营销管理
            </div>
            <ul class="sub-menu">
                <li><a href="#">班级管理</a></li>
                <li><a href="#">课程管理</a></li>
                <li><a href="#">教师管理</a></li>
            </ul>
        </div>
        <div class="close-button" id="J_close-button">111</div>
    </nav>
    <!-- end sidebar-menu -->

    <!-- main start -->
    <main class="main">
        <!-- main-part1 start -->
        <section class="main-part1">
            <div class="common-width row">
                <div class="col col-xxl-3 col-lg-6 col-sm-12">
                    <div class="col-content">
                        <div class="common-title">最新学员</div>
                        <div class="text">
                            <span class="txt">最后一周数据</span>
                            <span class="num">688</span>
                        </div>
                        <a href="#" class="more">查看详情</a>
                    </div>
                </div>
                <div class="col col-xxl-3 col-lg-6 col-sm-12">
                    <div class="col-content">
                        <div class="common-title">订单</div>
                        <div class="text">
                            <span class="txt">未支付订单</span>
                            <span class="num">11</span>
                        </div>
                        <a href="#" class="more">查看详情</a>
                    </div>
                </div>
                <div class="col col-xxl-3 col-lg-6 col-sm-12">
                    <div class="col-content">
                        <div class="common-title">当月利润</div>
                        <div class="text">
                            <span class="txt">截止到昨天</span>
                            <span class="num">68384</span>
                        </div>
                        <a href="#" class="more">查看详情</a>
                    </div>
                </div>
                <div class="col col-xxl-3 col-lg-6 col-sm-12">
                    <div class="col-content">
                        <div class="common-title">快到期学员</div>
                        <div class="text">
                            <span class="txt">最后一周数据</span>
                            <span class="num">688</span>
                        </div>
                        <a href="#" class="more">查看详情</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- end main-part1 -->

        <!-- main-part2 start -->
        <section class="main-part2">
            <div class="common-width row">
                <div class="col col-xxl-8 col-md-12">
                    <div class="col-content">
                        <div class="common-title">最新报名学员</div>
                        <table class="orders">
                            <tr>
                                <th>顾客</th>
                                <th class="width30">产品</th>
                                <th class="fp">发票</th>
                                <th>价格</th>
                                <th>状态</th>
                            </tr>
                            <tr>
                                <td><img src="./images/tx1.png" alt="">张三</td>
                                <td>web前端体系课程，是目前最棒的学习体系，包含html、css、javascript、vue、react等，是前端开发的基础，也是前端开发的核心。</td>
                                <td class="fp">已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <td><img src="./images/tx2.png" alt="" width="40">张三</td>
                                <td>web前端0基础到实战</td>
                                <td class="fp">已开</td>
                                <td>6888</td>
                                <td>已支付</td>
                            </tr>
                            <tr>
                                <td><img src="./images/tx1.png" alt="" width="40">张三</td>
                                <td>JavaScript系列课程</td>
                                <td class="fp">已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <td><img src="./images/tx2.png" alt="" width="40">张三</td>
                                <td>JavaScript系列课程</td>
                                <td class="fp">已开</td>
                                <td>6888</td>
                                <td>已发货</td>
                            </tr>
                            <tr>
                                <td><img src="./images/tx1.png" alt="" width="40">张三</td>
                                <td>移动WebApp开发课程</td>
                                <td class="fp">已开</td>
                                <td>6888</td>
                                <td>已支付</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col col-xxl-4 col-md-12">
                    <div class="col-content hot-course">
                        <div class="common-title">热门课程</div>
                        <ul>
                            <li>
                                <span class="iconfont icon-css"></span>
                                <div class="info">
                                    <span class="title">css 6大主流布局技术</span>
                                    <span class="num">报名人:12344</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-js"></span>
                                <div class="info">
                                    <span class="title">Javascript基础入门到实战</span>
                                    <span class="num">报名人:12344</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-vuejs"></span>
                                <div class="info">
                                    <span class="title">Vue基础到实战</span>
                                    <span class="num">报名人:12344</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-react"></span>
                                <div class="info">
                                    <span class="title">React入门到精通</span>
                                    <span class="num">报名人:12344</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-shouji"></span>
                                <div class="info">
                                    <span class="title">移动端WebAPP开发</span>
                                    <span class="num">报名人:12344</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- end main-part2 -->

        <!-- main-part3 start -->
        <section class="main-part3">
            <div class="common-width row">
                <div class="col col-xxl-4 col-sm-12">
                    <div class="col-content">
                        <div class="common-title">站长公告</div>
                        <div class="img-warp bl452-254">
                            <img src="./images/notice.png" alt="">
                        </div>
                        <div class="info">艾编程是在大数据人工智能时代高速发展的今天成立的一家以提 供各行业商业项目研发解决方案为核心的在线学习平台。</div>
                    </div>
                </div>
                <div class="col col-xxl-8 col-sm-12">
                    <div class="col-content common-box">
                        <div class="common-title">常用入口</div>
                        <div class="row common-box-list">
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-kechengguanli"></span>
                                    课程管理
                                </a>

                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-youhuiquan"></span>
                                    学生管理
                                </a>
                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-banji"></span>
                                    教师管理
                                </a>
                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-dingdan"></span>
                                    订单管理
                                </a>
                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-web"></span>
                                    班级管理
                                </a>
                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-yonghuguanli"></span>
                                    角色管理
                                </a>
                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-dingdan"></span>
                                    权限管理
                                </a>
                            </div>
                            <div class="col-item col-xxl-3 col-md-6">
                                <a href="#">
                                    <span class="iconfont icon-jiaoxuepingjia"></span>
                                    日志管理
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end main-part3 -->

        <!-- main-part4 start -->
        <section class="main-part4">
            <div class="common-width row">
                <div class="col col-xxl-4 col-md-6 col-sm-12">
                    <div class="col-content hot-course">
                        <div class="common-title">课程交易金额</div>
                        <ul>
                            <li>
                                <span class="iconfont icon-css"></span>
                                <div class="info">
                                    <span class="title">css 6大主流布局技术</span>
                                    <span class="num">￥32334</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-js"></span>
                                <div class="info">
                                    <span class="title">Javascript基础入门到实战</span>
                                    <span class="num">￥765432</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-vuejs"></span>
                                <div class="info">
                                    <span class="title">Vue基础到实战</span>
                                    <span class="num">￥777556</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-react"></span>
                                <div class="info">
                                    <span class="title">React入门到精通</span>
                                    <span class="num">￥877667</span>
                                </div>
                            </li>
                            <li>
                                <span class="iconfont icon-shouji"></span>
                                <div class="info">
                                    <span class="title">移动端WebAPP开发</span>
                                    <span class="num">$8566896</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col col-xxl-4 col-md-6 col-sm-12">
                    <div class="col-content">
                        <div class="common-title">数据分析</div>
                        <div class="mychart min400 " id="chart1"></div>
                    </div>
                </div>
                <div class="col col-xxl-4 col-md-12 col-sm-12">
                    <div class="col-content min400">
                        <div class="common-title">交易平台</div>
                        <div class="mychart min400 " id="chart2"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end main-part4 -->

    </main>
    <!-- end main -->
    <script>
        //1 获取每个菜单项对应的标题 .menu-item-title
        const menuItemTitles = document.querySelectorAll('.sidebar-menu .menu-item-title');
        // 9 获取sidebar-menu
        const sidebarMenu = document.querySelector('.sidebar-menu');
        // 10 获取所有menu-item
        const menuItems = document.querySelectorAll('.sidebar-menu .menu-item');
        // 2 遍历所有menu-item-tltle，给他们添加点击事件
        for (let i = 0; i < menuItemTitles.length; i++) {
            // 7 给menuItemTitle 添加一个属性用来记录当前菜单状态（打开、关闭）
            menuItemTitles[i].flag = "off";
            // 3 添加点击事件
            menuItemTitles[i].addEventListener('click', function () {
                //11 点击后，将sidebar-menu 宽度设置为260px
                sidebarMenu.style.width = '260px';
                
                // 4 切换active类名
                this.parentNode.classList.toggle('active');
                if (this.flag == "off") {
                    // 5 获取menu-item-title 兄弟元素ul的占位高
                    // console.log(this.nextElementSibling)
                    const _height = this.nextElementSibling.offsetHeight;
                    //6 动态设置对应父元素的高度
                    this.parentNode.style.height = _height + 40 + 'px';
                    // 9 点击打开菜单后，将flag 改为on
                    this.flag = "on";
                } else {
                    // 8 点击关闭菜单
                    this.parentNode.style.height = 40 + 'px';
                    // 10 点击关闭菜单后，将flag 改为off
                    this.flag = "off";
                }

            });
            
        }

        // 监听浏览器resize事件，然后获取当前屏幕的视口大小（页面宽）
        window.addEventListener('resize', function () {
            // 1.获取当前视口宽
            const clientWidth = document.documentElement.clientWidth;
            if(clientWidth < 1400) {
               // 2.将侧边导航栏宽度设为75px,然后将所有菜单收缩
                scaleHide();
                
            } else {
                // 3.将侧边导航栏宽度设为260px
                sidebarMenu.style.width = '260px';
            }
            
        })

        // 点击按钮要收缩
        // 1 点击按钮获取按钮
        const closeButton = document.getElementById('J_close-button');
        // 2 点击按钮添加点击事件
        closeButton.addEventListener('click', function () {
            scaleHide();
        })

        function scaleHide(){
            sidebarMenu.style.width = '75px';
            for (let i = 0; i < menuItems.length; i++) {
                menuItems[i].classList.remove('active');
                //将menu-item 的高度设置为40px
                menuItems[i].style.height = '40px';
                //将所有menu-item-title的flag属性值设置为off
                menuItems[i].children[0].flag = "off";
            }
        }
    </script>

    <script>
        const chart1 = document.getElementById('chart1');
        const chart2 = document.getElementById('chart2');
        var myChart1 = echarts.init(chart1);
        var myChart2 = echarts.init(chart2);
        myChart1.setOption({
            title: {
                text: 'Stacked Area Chart'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        });
        myChart2.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 10
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ]
        });
        // 监听窗口大小变化
        window.addEventListener('resize', function () {
            myChart1.resize();
            myChart2.resize();
        });

    </script>
    <script>
        const lanmuIcon = document.getElementById('J_lanmu');
        const menuList = document.getElementById('J_menu-list');
        lanmuIcon.addEventListener('click', function () {
            menuList.classList.toggle('show');
            const isRotated = lanmuIcon.style.transform === 'rotate(180deg)';
            lanmuIcon.style.transform = isRotated ? 'rotate(0deg)' : 'rotate(180deg)';
        })
        //监听Windowsresize事件
        window.addEventListener('resize', function () {
            if (window.innerWidth < 768) {
                menuList.classList.remove('show');
                lanmuIcon.style.transform = 'rotate(0deg)';
            }
        })
    </script>
</body>

</html>